<!-- CustomTable.vue -->
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="column in tableCol" :key="column.prop" :prop="column.prop" :label="column.label">
      <template slot-scope="scope">
        <!-- 根据列的类型渲染不同内容 -->
        <template v-if="!column.type||column.type === 'text'">
          {{ scope.row[column.prop] }}
        </template>
        <template v-else-if="column.type === 'tag'">
          <el-tag>{{ scope.row[column.prop] }}</el-tag>
        </template>
        <template v-else-if="column.type === 'button'">
          <el-button v-for="(btn,ind) in column.action" :key="ind"
                     :type="btn.type?btn.type:'text'" :size="btn.size?btn.size:'small'"
                     @click="btn.click(scope.row, scope.$index)">
            {{ btn.text }}
          </el-button>
        </template>
        <!-- 其他类型的内容可以继续扩展 -->
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'CustomTable',
  props: {
    tableData: {
      type: Array,
      required: true,
    },
    tableCol: {
      type: Array,
      required: true,
    },
  },
  methods: {},
};
</script>
